<template>
  <div class="app-container">
    <el-card class="card">
      <div slot="header" class="clearfix">
        <span>审批详情</span>
      </div>
      <component :is="component" v-if="component" />
      <div class="bottom">
        <el-button class="button" type="primary" size="mini">同意</el-button>
        <el-button class="button" size="mini">拒绝</el-button>
      </div>
    </el-card>
    <el-card v-if="false" class="card">
      <div slot="header" class="clearfix">
        <span>流程图</span>
      </div>
    </el-card>
    <el-card class="card">
      <div slot="header" class="clearfix">
        <span>审批记录</span>
      </div>
      <el-timeline :reverse="true">
        <el-timeline-item
          v-for="item in approvalRecord"
          :key="item.startDate"
          :timestamp="item.startDate"
          placement="top"
        >
          <el-card>
            <h4>task: {{ item.taskName }}</h4>
            <p>审批人：{{ item.handler }}</p>
            <p>开始时间： {{ parseTime(item.startDate) }} </p>
            <p>结束时间：{{ item.endDate }}</p>
            <p>处理时长：{{ item.durationInMillis }}</p>
            <p>审批意见：{{ item.remark }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { schedule } from '@/api/todo'
export default {
  name: 'ToDoDetail',
  data() {
    return {
      component: (resolve) =>
        require([`@/views${this.$route.query.path}`], resolve),
      approvalRecord: []
    }
  },
  created() {
    this.getRecord()
  },
  methods: {
    getRecord() {
      schedule(this.$route.query.taskId).then(response => {
        this.approvalRecord = response.data
      })
    }
  }
}
</script>

<style>
.card {
  margin-bottom: 15px;
}
</style>
